<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
    margin:0px;
}
/*-----------------*/
.top-area{
	margin-top:10px;
	width:990px;
	height:40px;
	border:1px solid #D3D3D3;
	background-color:#00FFFF;
}
/*-----------------*/
.main-area{
	margin-top:10px;
	width:990px;
	border:1px solid #D3D3D3;
}

.task_font{
	float:left;
	width:105px;
	height:60px;
	line-height:60px;
	font-size:35px;
	text-align:center;
	margin-right:10px;
	color:#E066FF;
	font-weight:bold;
}
.gain_font{
	float:left;
	width:870px;
	height:80px;
	line-height:100px;
	text-align:left;
	color:#87CEFF;
	font-size:50px;
}
.primary{
	margin-top:5px;
	width:750px;
	height:300px;
	border:1px solid #D3D3D3;
}
.middle{
	width:750px;
	height:300px;
	margin-top:15px;
	border:1px solid #D3D3D3;
}
.high{
	width:750px;
	height:300px;
	margin-top:15px;
	border:1px solid #D3D3D3;
}
.ultimate{
	width:750px;
	height:300px;
	margin-top:15px;
	margin-bottom:10px;
	border:1px solid #D3D3D3;
}

.level{
	width:720px;
	height:30px;
	line-height:30px;
	text-align:left;
	padding-left:30px;
	border-width:0px 0px 1px 0px;
	border-style:solid;
	border-color:#D3D3D3;
	color:#00CED1;
	font-size:20px;
	font-weight:bold;
}

.main_task1_2{
	float:left;
	width:250px;
	height:270px;
	text-align:left;
	border-width:0px 1px 0px 0px;
	border-style:solid;
	border-color:#D3D3D3;
}
.main_task3{
	float:left;
	width:246px;
	height:270px;
	text-align:left;
}

.schedule1_2{
	width:250px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:#1E90FF;
	opacity:0.9;
	color:#FFFAF0;
	font-size:15px;
	font-weight:bold;
	border-width:0px 1px 0px 0px;
	border-style:solid;
	border-color:#A9A9A9;
}
.schedule3{
	width:249px;
	height:30px;
	line-height:30px;
	text-align:center;
	background-color:#1E90FF;
	opacity:0.9;
	color:#FFFAF0;
	font-size:15px;
	font-weight:bold;
}

.finish_task{
	margin-top:6px;
	width:245px;
	height:20px;
	line-height:20px;
	text-align:left;
	padding-left:5px;
	font-size:13px;
}
.underway_task1{
	float:left;
	margin-top:6px;
	width:200px;
	height:20px;
	line-height:20px;
	text-align:left;
	padding-left:5px;
	font-size:13px;
}
.underway_task2{
	float:left;
	margin-top:6px;
	margin-left:5px;
	width:25px;
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:13px;
	color:#00CED1;
}
.more{
	margin-top:10px;
	width:240px;
	height:20px;
	line-height:20px;
	font-size:13px;
	text-align:right;
	padding-right:10px;
}
/*-----------------*/
.last-area{
	width:620px;
	height:90px;
	margin-top:20px;
	border:1px solid #D3D3D3;
}
.clear_{
	clear:both;
}
</style>
</head>
<body>
	<center>
		<div class="top-area"></div>
		
		<div class="main-area">
			<div class="task_font"><i>任&nbsp;务</i></div>
			<div class="gain_font"><i><u>成果</u></i></div>
			<div class="clear_"></div>
			
			<div class="primary">
				<div class="level">初&nbsp;级&nbsp;任&nbsp;务</div>
				<div class="main_task1_2">
					<div class="schedule1_2">已&nbsp;&nbsp;完&nbsp;&nbsp;成</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="finish_task">JAVA达人</div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task1_2">
					<div class="schedule1_2">进&nbsp;&nbsp;行&nbsp;&nbsp;中...</div>
					<%for (int i=0;i<8;i++){ %>
					<div class="underway_task1">飞机达人</div>
					<div class="underway_task2">80%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task3">
					<div class="schedule3">未&nbsp;&nbsp;做</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="underway_task1">购物达人</div>
					<div class="underway_task2">0%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
			</div><div class="clear_"></div>
			
			<div class="middle">
				<div class="level">中&nbsp;级&nbsp;任&nbsp;务</div>
				<div class="main_task1_2">
					<div class="schedule1_2">已&nbsp;&nbsp;完&nbsp;&nbsp;成</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="finish_task">JAVA达人</div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task1_2">
					<div class="schedule1_2">进&nbsp;&nbsp;行&nbsp;&nbsp;中...</div>
					<%for (int i=0;i<8;i++){ %>
					<div class="underway_task1">飞机达人</div>
					<div class="underway_task2">80%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task3">
					<div class="schedule3">未&nbsp;&nbsp;做</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="underway_task1">购物达人</div>
					<div class="underway_task2">0%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
			</div>
			
			<div class="high">
				<div class="level">高&nbsp;级&nbsp;任&nbsp;务</div>
				<div class="main_task1_2">
					<div class="schedule1_2">已&nbsp;&nbsp;完&nbsp;&nbsp;成</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="finish_task">JAVA达人</div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task1_2">
					<div class="schedule1_2">进&nbsp;&nbsp;行&nbsp;&nbsp;中...</div>
					<%for (int i=0;i<8;i++){ %>
					<div class="underway_task1">飞机达人</div>
					<div class="underway_task2">80%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task3">
					<div class="schedule3">未&nbsp;&nbsp;做</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="underway_task1">购物达人</div>
					<div class="underway_task2">0%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
			</div>
			
			<div class="ultimate">
				<div class="level">终&nbsp;级&nbsp;任&nbsp;务</div>
				<div class="main_task1_2">
					<div class="schedule1_2">已&nbsp;&nbsp;完&nbsp;&nbsp;成</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="finish_task">JAVA达人</div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task1_2">
					<div class="schedule1_2">进&nbsp;&nbsp;行&nbsp;&nbsp;中...</div>
					<%for (int i=0;i<8;i++){ %>
					<div class="underway_task1">飞机达人</div>
					<div class="underway_task2">80%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
				<div class="main_task3">
					<div class="schedule3">未&nbsp;&nbsp;做</div>
					<%for(int i=0;i<8;i++){ %>
					<div class="underway_task1">购物达人</div>
					<div class="underway_task2">0%</div>
					<div class="clear_"></div>
					<%} %>
					<div class="more"><a href="##">更多>></a></div>
				</div>
			</div>
		</div>
		
		<div class="last-area"></div>
	</center>
</body>
</html>